<%@page import="org.apache.commons.lang.StringUtils"%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page language="java" import="java.util.*" %>
<%@ page language="java" import="java.io.*" %>
<%@ page language="java" import="com.tangdi.production.mpapp.utils.WebPayServletUtil"
	%>
<%@ page language="java" import="com.tangdi.production.mpapp.constants.Key"
	%>
<%!public boolean sceneCheck(String scene) {
		//远程收款不会进入该界面
		if (StringUtils.isEmpty(scene)) {
			return false;
		} else if (Key.SCENE_ON_THE_SPOT.equals(scene)) {
			return true;
		} else if (Key.SCENE_CONSUMPTION.equals(scene)) {
			return true;
		}else if (Key.SCENE_CERTFICATION.equals(scene)) {
			return true;
		}else if (Key.SCENE_COMPANY.equals(scene)) {
			return true;
		}
		return false;
	}%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";

	request.setAttribute("on_back", "1");

	WebPayServletUtil payUtil = new WebPayServletUtil();
	String scene = request.getParameter("scene");//交易场景
	
	//交易场景无效
	if (!sceneCheck(scene)) {
		payUtil.toIndexPage(request, response);
	}
	
	boolean ok = payUtil.validation(request, response);
	if (!Key.SCENE_COMPANY.equals(scene)) {
		if (!ok) {
			payUtil.toLoginPage(request, response);
		}
	}

	String SETTLE_TYPE = request.getParameter("SETTLE_TYPE");//结算类型
	String TRATYP = request.getParameter("TRATYP");//交易类型

	String AMOUNT = request.getParameter("AMOUNT");//充值金额
	String PID = request.getParameter("PID");//商品名称
	String BIZTYPE = request.getParameter("BIZTYPE");//子业务类型
	String SHOP_KE_TEL = request.getParameter("SHOP_KE_TEL");//如果是潇客充值，会有该参数

	if(SHOP_KE_TEL == null){
		SHOP_KE_TEL = "";
	}
	
	//交易金额不能为空
	if (StringUtils.isEmpty(AMOUNT)) {
		payUtil.toIndexPage(request, response);
	}

	//商品名称不能为空
	if (StringUtils.isEmpty(PID)) {
		payUtil.toIndexPage(request, response);
	}

	//交易类型
	if (!"00".equals(TRATYP)) {//不是消费就当充值处理
		TRATYP = "01";
	}

	//结算类型T0T1
	if (!"2".equals(SETTLE_TYPE)) {//不是T+0就当T+1处理
		SETTLE_TYPE = "1";
	}
	
	//子交易类型默认为充值
	if(BIZTYPE == null || BIZTYPE.isEmpty()){
		BIZTYPE = "01";
	}
	String respond_url = request.getParameter("respond_url");//如果是潇客充值，会有该参数
	if (respond_url == null) {
		respond_url = "";
	}
	
	//潇客充值订单号(第三方订单号)
	String subject = request.getParameter("subject");
	if (subject == null) {
		subject = "";
	}

	request.setAttribute("title", "快捷收款");
%>
<!DOCTYPE html>
<html lang="zh">
<head>
<base href="<%=basePath%>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>快捷收款</title>

<meta name="description" content="Common form elements and layouts" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<%
	out.write("<script type=\"text/javascript\">");
	out.write("var scene='" + scene + "';");
	out.write("var TRATYP='" + TRATYP + "';");
	out.write("var SETTLE_TYPE='" + SETTLE_TYPE + "';");
	out.write("var ISLOGIN='" + ok + "';");
	out.write("var BIZTYPE='" + BIZTYPE + "';");
	out.write("var SHOP_KE_TEL='" + SHOP_KE_TEL + "';");
	out.write("var AMOUNT='" + AMOUNT + "';");
	out.write("var respond_url='" + respond_url + "';");
	out.write("var subject='" + subject + "';");
	out.write("</script>");
%>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"
	charset="UTF-8"></script>

<script type="text/javascript" src="js/core-1.0.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/webpay/kdpay_order_pay.js"
	charset="UTF-8"></script>

<script type="text/javascript">
	if(ISLOGIN == "true"){
		getPayUserInfo();//初始化卡号列表
	}
</script>

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="ace_v1.3/assets/css/bootstrap.css" />

<link rel="stylesheet" href="ace_v1.3/assets/css/chosen.css" />

<!-- text fonts -->
<link rel="stylesheet" href="ace_v1.3/assets/css/ace-fonts.css" />

<link rel="stylesheet" href="ace_v1.3/assets/css/font-awesome.css" />
<link rel="stylesheet" href="css/webpay/core.1.0.css" />
<link rel="stylesheet" href="css/dialog.css" />
<!-- ace styles -->
<link rel="stylesheet" href="ace_v1.3/assets/css/ace.css"
	class="ace-main-stylesheet" id="main-ace-style" />



<!--[if lte IE 9]>
			<link rel="stylesheet" href="ace_v1.3/assets/css/ace-part2.css" class="ace-main-stylesheet" />
		<![endif]-->

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="ace_v1.3/assets/css/ace-ie.css" />
		<![endif]-->



<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="ace_v1.3/assets/js/html5shiv.js"></script>
		<script src="ace_v1.3/assets/js/respond.js"></script>
		<![endif]-->

<jsp:include page="../plug/head-include.jsp" />

<style type="text/css">
	.countdown_box{
		position: absolute;
		z-index: 1000;
		width: 100%;
		height: 100%;
		margin: 0;
		top: 0px;
		background: gray;
		opacity:0.9;
		display: none;
	}
	.countdown_content{
		width: 200px;
		height: 70px;
		background: white;
		margin: 0 auto;
		margin-top: 150px;
		line-height: 30px;
		text-align: center;
		
		moz-border-radius: 3px !important;      /* Gecko browsers */
	    -webkit-border-radius: 3px !important;   /* Webkit browsers */
	    border-radius:3px !important;         
	}
	
	.bank_row{
		padding: 3px 5px;
		font-size: 12px;
		font-weight: 600;
	}
	
	
</style>
</head>

<body class="no-skin">
	<!-- #section:basics/navbar.layout -->
	<jsp:include page="../plug/title.jsp" />

	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">

		<!-- #section:basics/sidebar -->
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<!-- #section:basics/content.breadcrumbs -->
				<!-- /section:basics/content.breadcrumbs -->
				<div class="page-content">
					<!-- #section:settings.box -->
					<!-- <div class="page-header">
						<h1>
							Form Elements <small> <i
								class="ace-icon fa fa-angle-double-right"></i> Common form
								elements and layouts
							</small>
						</h1>
					</div>
					 -->
					<!-- /.page-header -->
					<!-- <div class="row">
						<div class="col-xs-12 order-desc">
							温馨提示：获取验证码之前请仔细检查各项数据输入是否正确，数据错误将导致该笔订单失效并无法重新支付；如出现上述问题导致订单无法支付，请联系收款商户重新发起收款
						</div>
					</div> -->
					<div
						class="row-space clear-padding-left clear-padding-right clear-padding-top"></div>
					<form class="form-horizontal" id="orderPayForm" role="form">
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<input type="hidden" name="scene" value="<%=scene%>"
									validate="true"> <input type="hidden"
									name="SETTLE_TYPE" value="<%=SETTLE_TYPE%>" validate="true">
								<input type="hidden"
									name="BIZTYPE" value="<%=BIZTYPE%>" validate="true">
								<input type="hidden" name="TRATYP" value="<%=TRATYP%>"
									validate="true"> <input type="hidden" name="AMOUNT"
									value="<%=AMOUNT%>" validate="true"> <input
									type="hidden" name="PID" value="<%=PID%>" validate="true">

								<input type="hidden" name="ORD_ID" value="" validate="true">
								 <input type="hidden" name="subject"
									value="<%=subject%>"/>
								
								<input type="hidden" name="SHOP_KE_TEL" value="<%=SHOP_KE_TEL %>" validate="true">
								<input name="PAY_CHANNELS" value="YIBAO" type="hidden" />
								<input name="PAYTYPE" value="05" type="hidden" />

								<!-- <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">
										温馨提示 </label>

									<div class="col-xs-12 col-sm-12 prompt">
										获取验证码之前请仔细检查各项数据输入是否正确，数据错误将导致该笔订单失效并无法重新支付；如出现上述问题导致订单无法支付，请联系收款商户重新发起收款
									</div>
								</div> -->
								<!-- #section:elements.form -->
								<!-- <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">
										商户名称 </label>

									<div class="col-xs-12 col-sm-12">
										<input type="text" name="CUST_NAME" placeholder="商户名称"
											readonly="readonly" validate="true" class="form-control" />
									</div>
								</div> -->

								<!-- <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">
										商品名称 </label>

									<div class="col-xs-12 col-sm-12">
										<input type="text" name="GOODS_NAME" readonly="readonly"
											placeholder="商品名称" class="form-control" />
									</div>
								</div> -->

								<!-- <div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="ORDERID" validate="true"
											readonly="readonly" placeholder="商品订单号" class="form-control" />
									</div>
								</div> -->

								<!-- <div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="ORDAMT" validate="true"
											readonly="readonly" placeholder="订单金额(元)"
											class="form-control" />
									</div>
								</div> -->

								<!--<div class ="row card-list-box">
									<div class="col-sm-12 card-list-view">
									
									</div>
								</div> -->
								
								<!-- <div class="form-group">
									<div class="col-sm-8 col-xs-12 col-sm-offset-2">
										<div class="col-xs-4 card-view">
											<label><input name="CARD_TYPE" value="02" type="radio" checked="checked" class="ace"/>
											<span class="lbl">信用卡支付</span></label>
										</div>
										<div class="col-xs-4 card-view">
											<label><input name="CARD_TYPE" value="01" type="radio" class="ace"/>
											<span class="lbl">借记卡支付</span></label>
										</div>
									</div>
								</div> -->

								<div class="form-group card-list-box" style="display: none;">
									<!-- <label class="col-sm-3 control-label no-padding-right">
										快速选择银行卡</label> -->

									<div class="col-sm-8 col-xs-12 col-sm-offset-2 card-list-view">
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-6 col-xs-6 col-sm-offset-2">
										<select name="CARD_TYPE" onchange="selectCardType();" class="chosen-select form-control">
											<option value="02" selected="selected">信用卡支付</option>
											<option value="01" >储蓄卡支付</option>
										</select>
									</div>
									<div class="col-sm-4 col-xs-6" id="bankList">
										<button class="btn btn-info" type="button" style="height: 30px;">
											<i class="ace-icon" ></i>支持银行
										</button>
									
									</div>
								</div>
								
								<div class="form-group">
									<div class="col-sm-8 col-xs-12 col-sm-offset-2">
										<input type="text" name="BANKNO" validate="true"
											placeholder="付款银行卡号" class="form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-8 col-xs-12 col-sm-offset-2">
										<input type="text" name="BUYERNAME" validate="true"
											placeholder="银行卡登记真实姓名" class="form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-8 col-xs-12 col-sm-offset-2">
										<input type="text" name="CREDCODE" validate="true"
											placeholder="身份证号码" class="form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-8 col-xs-12 col-sm-offset-2">
										<input type="text" name="BUYERTEL" validate="true"
											placeholder="银行卡绑定手机号" class="form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-8 col-xs-12 col-sm-offset-2">
										<input type="text" name="CARD_EXPIRE" validate="true"
											tips="格式:月月/年年" placeholder="银行卡有效期"
											RegExp="/(0[1-9]|1[0-2])\/(1[5-9]|[2-9][0-9])/"
											class=" input-mask-date form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-8 col-xs-12 col-sm-offset-2">
										<input type="text" name="CVV" validate="true"
											RegExp="/^\d{3}$/" placeholder="银行卡背面3位CVV码"
											class="form-control" />
									</div>
								</div>

								<div class="form-group" id="form_verifyCode" style="display: none;">
									<div class="col-sm-8 col-xs-12 col-sm-offset-2">
										<input type="text" name="VERIFYCODE" placeholder="短信验证码"
											class="col-xs-5 col-sm-7 no-border" /> &nbsp;
										<button type="button"
											class="app-pay-theme btn btn-info check-code "
											style="width: 135px;height: 38px;">获取验证码</button>
									</div>
								</div>
								<div class="row-space clear-padding-left clear-padding-right"></div>
								<div class="form-group">
									<div
										class="col-sm-8 col-xs-12 col-sm-offset-2 checkbox agreement"
										style="padding-left: 0px;padding-right: 0px;">
										<label> <input name="iDo" type="checkbox"
											checked="checked" value="1" class="ace" /> <span class="lbl">我已阅读并同意<a
												href="javascript:void(0)" onclick="readAgreement()">《口袋支付服务协议》</a></span>
										</label>
									</div>
								</div>

								<div
									class="clearfix col-sm-8 col-xs-12 col-sm-offset-2 menu-btn-box">
									<button id="btn_pay" class="btn btn-info btn-lg btn-block" type="button"
										>
										<i class="ace-icon fa fa-check "></i> 付 款
									</button>
								</div>
								<!-- /.col -->
							</div>
					</form>
					
					<div class="dialog_list" style="display: none;">
						<div id="bankListBox">
							<div class="tabbable">
								<ul class="nav nav-tabs" id="myTab">
									<li class="active nav-li" onclick="selectCardList(this);">
										<a data-toggle="tab" nav-id="creditCardList"  href="javascript:void(0)">
											信用卡
										</a>
									</li>
									
									<li class="nav-li" onclick="selectCardList(this);">
										<a data-toggle="tab" nav-id="debitCardList"  href="javascript:void(0)" >
											借记卡
										</a>
									</li>
								</ul>

								<div class="tab-content">
									<div id="creditCardList" class="tab-pane fade in active">
										<div class="bank_row">工商银行</div>
										<div class="bank_row">中国银行</div>
										<div class="bank_row">建设银行</div>
										<div class="bank_row">邮政储蓄</div>
										<div class="bank_row">中信银行</div>
										<div class="bank_row">光大银行</div>
										<div class="bank_row">华夏银行</div>
										<div class="bank_row">招商银行</div>
										<div class="bank_row">兴业银行</div>
										<div class="bank_row">浦发银行</div>
										<div class="bank_row">平安银行</div>
										<div class="bank_row">广发银行</div>
										<div class="bank_row">北京银行</div>
										<div class="bank_row">上海银行</div>
										<div class="bank_row">民生银行</div>
										<div class="bank_row">农业银行</div>
									</div>
									
									<div id="debitCardList" class="tab-pane fade in ">
										<div class="bank_row">建设银行</div>
										<div class="bank_row">农业银行</div>
										<div class="bank_row">工商银行</div>
										<div class="bank_row">中国银行</div>
										<div class="bank_row">浦发银行</div>
										<div class="bank_row">光大银行</div>
										<div class="bank_row">平安银行</div>
										<div class="bank_row">兴业银行</div>
										<div class="bank_row">华夏银行</div>
										<div class="bank_row">北京银行</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<!-- /.row -->
				</div>
				
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->


	</div>
	
	<!-- 跳转倒计时显示层 -->
	<div id="jump_countdown" class="countdown_box">
		<div class="countdown_content">
			
		</div>
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->
	<script type="text/javascript" src="js/dialog.js" charset="UTF-8"></script>
	
	<script type="text/javascript">
		function selectCardType(){
			var $sel = $("*[name='CARD_TYPE']");
			var val = $sel.val();
			var $CARD_EXPIRE = $("input[name='CARD_EXPIRE']");
			var $CVV = $("input[name='CVV']");
			if(val == "01"){//借记卡
				$CARD_EXPIRE.hide();
				$CVV.hide();
				
				$CARD_EXPIRE.attr("validate","false");
				$CVV.attr("validate","false");
			}else{//信用卡
				$CARD_EXPIRE.show();
				$CVV.show();
				
				$CARD_EXPIRE.attr("validate","true");
				$CVV.attr("validate","true");
			}
			
			$("input[name='BANKNO']").val("");//清空卡号
			$CARD_EXPIRE.val("");//清空有效期
			$CVV.val("");//清空cvv码
		}
		selectCardType();
		
		$("#bankList").on("click",function(){
			openDialog({
				title : "收款支持银行列表",
				width:"100%",
				height:"100%",
				target :"#bankListBox"
//				pageUrl :'index.jsp'
			});
		});
		
		/* $(".nav-li").each(function (){
			var $this = $(this);
			$this.on("click",function(){
				alert();
				var href = $a.attr("href");
				alert(href);
				var id = href.substring(href.indexOf("#") + 1);
				
				$(".tabbable li").removeClass("active");
				$(".tab-content").children("div").hide();
				$a.parents("li").addClass("active");
				$("#" + id).show();
			});
		}); */
		
		function selectCardList(obj){
			var $this = $(obj);
			//alert($this);
			var $a = $("a",$this);
			var id = $a.attr("nav-id");
			
			$(".tab-pane").removeClass("active");
			$(".nav-li").removeClass("active");
			
			$("#" + id).addClass("active");
			$this.addClass("active");
		}
		
	</script>

	<script type="text/javascript"
		src="ace_v1.3/assets/js/jquery.maskedinput.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/jquery.tips.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/dialog.css" />
	<link rel="stylesheet" type="text/css" href="css/webpay/core.1.0.css" />
</body>
</html>
